<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>网红店投币详情</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../../css/mui.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="../../css/timecheck.css" />
  <link rel="stylesheet" href="../../fonts/iconfont.css" />
  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>
  <style>
    html,
    body,
    #app {
      width: 100%;
      /*height: 100%;*/
    }

    .total-info {
      margin-top: 0.04rem;
      background-color: #FFFFFF;
      text-align: center;
      font-size: 0.22rem;
      line-height: 0.45rem;
    }
    /**/
    /**/

    table {
      font-size: 0.22rem;
      width: 100%;
      text-align: center;
      margin-top: 0.1rem;
    }
    table tr td{
      padding: 0.1rem 0;
      height: 0.8rem;
      font-size: 0.2rem;
    }
    table,
    table,
    tbody,td div{
      text-align: center;
    }
    td span{
      display: inline-block;
      text-align: left;
      vertical-align: middle;
    }
    .bglight {
      background-color: #FFFFFF;
    }
    .tab-head {
      background-color: #FFFFFF;
      line-height: 0.5rem;
    }

    .light {
      color: #8e8a8a;
    }
    .formDiv{
      width: 100%;
      background-color: white;
      padding:0 0.1rem 0.1rem;
      margin:0 ;
      color:black;
      display: flex;
      justify-content:space-between;
    }
    .form{
      width: 49%;
      background-color: #F7F7F7;
      border-radius: 0.2rem;
      text-align: center;
      padding: 0.3rem 0 ;
    }
    .float{
      width: 48%;
      float: left;
    }
    .form .float p{
      margin: 0 0 0.05rem;
      color:black;
      font-size: 0.22rem;
    }
    .borderRight1{
      border-right:1px solid #CCCCCC ;
    }
    .formTitle{
      font-size: 0.26rem;
      margin: 0 0 0.1rem;
    }
    .totalForm{
      width: 100%;
      text-align: center;
      font-size: 0.22rem;
    }
    .totalForm>p{
      width: 100%;
      color:black;
    }
    .totalForm>p:first-child{
      font-size: 0.26rem;
    }
    .totalForm p{
      margin: 0;
    }
    .totalForm .formFlex{
      display: flex;
      margin-top: 0.1rem;
    }
    .formFlex .flexItem{
      width: 33%;
    }
    .colorBlack{
      color:black
    }
    .mui-icon-arrowthindown::before{
      height: 0.2rem;
    }
    .scanForm{
      width: 100%;
      display: flex;
      justify-content:space-around
    }
    .scanDiv{
      width: 100%;
      text-align: center;
      background-color: #F7F7F7;
      border-radius: 0.2rem;
      padding-top: 0.2rem;
    }
    .fixed{
      width: 100%;
      font-size: 0.2rem;
      background-color: white;
      border-top:1px solid #ccc ;
      border-bottom:1px solid #ccc ;
      position: fixed;
      top:1.15rem;
      z-index: 9999999;
    }
    .fixed span{
      display: inline-block;
      text-align: center;
      height: 0.6rem;
      line-height: 0.6rem;
    }
    .display{
      display: none;
    }

    .choose{
      width: 1rem;
      margin: 0;
      text-align: center;
      padding: 0.02rem ;
      font-size: 0.18rem;
      background-color: white;
      border: 1px solid #ED7D31;
    }
    .chooseList{
      text-align: center;
      background-color: white;
      border-left: 1px solid #ED7D31;
      border-right: 1px solid #ED7D31;

    }
    .chooseList p{
      width:100%;
      margin: 0;
      padding: 0.02rem;
      border-bottom: 1px solid #ED7D31;
      font-size: 0.18rem;
      color:black;
    }
    .chooseList  .default{
      color:white;
      background-color: #ED7D31 ;
    }
    .jiantou{
      position: absolute;
      top:0.1rem;
      right: 0.3rem;
      width: 0.3rem;
    }
    .jiantou  img{
      width: 0.3rem;
    }
    .FontSizeSmall{
      font-size: 0.22rem;
    }
    .fontSizeBig{
      font-size: 0.26rem;
      color:black
    }
    .storeChoose{
      width:100%;
      font-size: 0.22rem;
      text-align: center;
      overflow: hidden;
      padding: 0.2rem 3%;
      background-color: white;
      margin-top: 0.1rem;
    }
    .storeChoose span{
      display: inline-block;
      width: 33%;
      padding: 0.06rem 0;
      float: left;
      border: 1px solid #ccc;
      font-size: 0.2rem;
      background-color:white;
    }
    .storeChoose span:nth-child(2){
      border-right: none;
      border-left: none;
    }
    .storeChoose .default{
      background-color: #ccc;
    }
    #lineChart{
      width: 100%;
      height: 4.2rem;
      background-color: white;
    }

    .dotDiv {
      width: 0.6rem;
      position: absolute;
      top: -0.1rem;
      right: 0;
    }

    .dotDiv .dot {
      width: 4px;
      height: 4px;
      border-radius: 2px;
      background-color: #ccc;
      margin: 0.05rem auto 0;
      /*float: right;*/
      /*margin-right: 0.05rem ;*/
    }
    .tips{
      font-size:12px;
      padding:0.1rem 0 0.1rem 10px;
      color:#8f8f94;
      background-color: white;
      margin-top: 0.2rem;

    }

  </style>
</head>

<body>
<script src="../../js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../config.js" type="text/javascript" charset="utf-8"></script>
<script src="../../common/timeCheck.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/mui.min.js"></script>
<div id="app" class="mui-content" >
  <time-check :type="2" :names='names' :dateType="dateType" :leftdata="originalData.atmCoinSell" :rightdata="originalData.atmCoinInput" leftunit="枚" rightunit="枚"  :actnum="actnum" :fromdate="fromDate" :todate='toDate' :top="top"></time-check>
  <div class="total-info flex">
    <div class="flex-item  textLeft">售币币值： {{originalData.avgCoin}}元/币 </div>
    <div class="flex-item textRight ">币差率：{{originalData.atmCoinLoseRate}}</div>
  </div>
  <!--表单数据 start-->
  <div class="tips">以下为适时数据</div>
  <div class="formDiv">

    <div class="form ">
      <div style="position: relative">
        <h4 class="formTitle fontSizeBig" style="width: 90%">ATM</h4>
        <img v-show="originalData.atmState === 1" src="../../images/troubleflag-green.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.1em;right:1.1rem"/>
        <img v-show="originalData.atmState === 0" src="../../images/troubleflag-gray.png"  alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.1em;right:1.1rem"/>
        <div class="dotDiv" @click="toAtmDetail('coinATMList')">
          <p class="dot"></p>
          <p class="dot"></p>
          <p class="dot"></p>
        </div>
      </div>
      <p style="color:black" class="FontSizeSmall">实收RMB：{{originalData.atmMoney}}</p>
      <div class="float borderRight1" style="width: 48%">
        <p class="colorBlack FontSizeSmall" style="color:#8e8a8a;" >RMB购代币</p>
        <p class="FontSizeSmall">{{originalData.atmSellCoin}}</p>
      </div>
      <div class="float" style="width: 48%">
        <p  style="color:#8e8a8a;"  class="FontSizeSmall">卡钻提代币</p>
        <p  class="FontSizeSmall">{{originalData.atmExCoin}}</p>
      </div>
    </div>
    <div class="form ">
      <h4 class="formTitle fontSizeBig">会员卡</h4>
      <p  style="color:black"  class="FontSizeSmall">实收RMB：{{originalData.cardMoney}}</p>
      <div class="float borderRight1" style="width: 30%;margin-left: 0.2rem">
        <p style="color:#8e8a8a"  class="FontSizeSmall">售G币</p>
        <p  class="FontSizeSmall">{{originalData.cardCoinSell}}</p>
      </div>
      <div class="float borderRight1" style="width: 30%">
        <p style="color:#8e8a8a;"  class="FontSizeSmall">投G币</p>
        <p  class="FontSizeSmall">{{originalData.cardCoinInput}} </p>
      </div>
      <div class="float" style="width: 30%">
        <p style="color:#8e8a8a;"  class="FontSizeSmall">提代币</p>
        <p  class="FontSizeSmall">{{originalData.cardCoinOutput}} </p>
      </div>
    </div>
  </div>
  <div class="formDiv " style="margin: 0 ;padding:  0 0.1rem 0.2rem">
    <div class="form">
      <div class="scanDiv">
        <p class="fontSizeBig"><strong>扫码直玩</strong></p>
        <div class="scanForm">
          <div style="width: 48%;color: black " class="borderRight1">
            <p  class="FontSizeSmall" style="margin: 0;">投G币</p>
            <p  class="FontSizeSmall" style="margin: 0;color: black">{{originalData.qrcodeInputCoin }}</p>
          </div>
          <div style="width: 48%;color: black">
            <p style="margin: 0;"  class="FontSizeSmall">游戏局数</p>
            <p  class="FontSizeSmall" style="margin: 0;color: black">{{originalData.qrcodePlayNumber   }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="form">
      <div class="scanDiv">
        <p style="" class="fontSizeBig"><strong>钻石提币</strong></p>
        <div class="scanForm">
          <div style="width: 48%;color: black " class="borderRight1">
            <p  class="FontSizeSmall" style="margin: 0">耗钻</p>
            <p  class="FontSizeSmall" style="margin: 0;color: black">{{originalData.buyCoinDiamond }}</p>
          </div>
          <div style="width: 48%;color: black">
            <p   class="FontSizeSmall" style="margin: 0">提币</p>
            <p   class="FontSizeSmall" style="margin: 0;color: black">{{originalData.diamondBuyCoin }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tips" style="text-align: left ">以下为抄表数据(10分钟/次)：</div>
  <div class="formDiv" style="padding-bottom: 0.2rem" >
    <div class="form" style="width: 100%;position: relative">
      <div class="totalForm">
        <p v-show="!isAve" class="fontSizeBig"><strong>总收币量</strong> </p>
        <p v-show="isAve"  class="fontSizeBig"><strong>单台收币量</strong></p>
        <p v-show="!isAve" style="font-size: 0.22rem"><strong >{{originalData.totalInput}} <span v-show="originalData.totalInput !=='--' ? true:false" >枚</span> </strong></p>
        <p v-show="isAve" style="font-size: 0.22rem"><strong>{{originalData.averageInput}} <span v-show="originalData.averageInput !=='--' ? true:false">枚</span></strong></p>
        <div class="formFlex">
          <div class="flexItem borderRight1">
            <p class='colorBlack'>{{originalData.rewardDevice.typeName ? originalData.rewardDevice.typeName :'--'}}</p>
            <p v-show="!isAve" class='colorBlack FontSizeSmall'>{{originalData.rewardDevice.typeCoin !== '--' ? originalData.rewardDevice.typeCoin+'枚' :'--'}} </p>
            <p  v-show="isAve"  class='colorBlack FontSizeSmall'>{{originalData.rewardDevice.aveTypeCoin !== '--' ? originalData.rewardDevice.aveTypeCoin+'枚' :'--'}} </p>
            <p v-show="!isAve" class="FontSizeSmall">{{originalData.rewardDevice.typeRate}}</p>
          </div>
          <div class="flexItem borderRight1">
            <p class='colorBlack'>{{originalData.ticketDevice.typeName ? originalData.ticketDevice.typeName : '--'}}</p>
            <p v-show="!isAve"  class='colorBlack FontSizeSmall' >{{originalData.ticketDevice.typeCoin !== '--' ? originalData.ticketDevice.typeCoin+'枚' : '--'}}</p>
            <p  v-show="isAve"  class='colorBlack FontSizeSmall'>{{originalData.ticketDevice.aveTypeCoin !== '--' ? originalData.ticketDevice.aveTypeCoin+'枚' : '--'}}</p>
            <p v-show="!isAve"  class="FontSizeSmall">{{originalData.ticketDevice.typeRate}}</p>
          </div>
          <div class="flexItem">
            <p class='colorBlack'>{{originalData.gameDevice.typeName ? originalData.gameDevice.typeName : '--'}}</p>
            <p v-show="!isAve"  class='colorBlack FontSizeSmall'>{{originalData.gameDevice.typeCoin !=='--' ? originalData.gameDevice.typeCoin+'枚' :'--'}}</p>
            <p v-show="isAve"  class='colorBlack FontSizeSmall'>{{originalData.gameDevice.aveTypeCoin !=='--' ? originalData.gameDevice.aveTypeCoin+'枚' :'--'}}</p>
            <p v-show="!isAve" class="FontSizeSmall">{{originalData.gameDevice.typeRate}}</p>
          </div>
        </div>

      </div>
      <div class="jiantou" @click="showAve">
        <img src="../../images/jiantou.png" alt="">
      </div>
    </div>


  </div>
  <!--表单数据 end-->
  <!--饼图 start-->
  <div class="mui-row" style="background-color: white;margin-top: 0.1rem">
    <div class="mui-col-xs-6 mui-col-sm-6">
      <div id="leftPie" style="width: 100%;height:3.5rem;"></div>
    </div>
    <div class="mui-col-xs-6 mui-col-sm-6">
      <div id="rightPie" style="width: 100%;height:3.5rem;"></div>
    </div>
  </div>
  <!--饼图 end-->
  <!--选择框-->
  <div class="storeChoose">
    <span @click="chooseMap(1)" :class="{default:chooseType ===1}" >{{(dateType === 0 ? '近30日' : dateType === 1 ? '近12周' : '近12个月')}}总收币量</span>
    <span @click="chooseMap(2)" :class="{default:chooseType ===2}" >{{(dateType === 0 ? '近30日' : dateType === 1 ? '近12周' : '近12个月')}}币值波动</span>
    <span @click="chooseMap(3)" :class="{default:chooseType ===3}" >币差率波动</span>
  </div>
  <!--折线图-->
  <div id="lineChart" ></div>
  <!--门店列表 start-->
  <div class="division flex" style="position: relative">
    <div class="line"><span></span></div>
    <div class="division-word">
      设备收币报告
    </div>
    <div class="line" style="text-align: left;width:0.3rem;"><span style="width:0.7rem;"></span></div>
    <div style="position: absolute;top:0;right:0.1rem">
      <div @click="openModal" class="choose">{{chooseValue}}</div>
      <div class="chooseList" v-show="modalShow">
        <p v-for="item in sortList "  @click="choose(item.id)" :class=" sortType === item.id ? 'default' : '' "  >{{item.value}}</p>
      </div>
    </div>
  </div>
  <!---->
  <div :class=" isFixed === true ? 'fixed' : 'display'">
    <span style="width:33%">设备</span>
    <span style="width:15.5%" class="light" >数量</span>
    <span style="width:16.5%" class="light" >总收币</span>
    <span style="width:32%">单台收币</span>
  </div>
  <table>
    <tr class="tab-head">
      <td style="width:30%">设备</td>
      <td style="width:15%" class="light" >数量</td>
      <td style="width:15%" class="light" >总收G币</td>
      <td style="width:30%">单台收G币</td>
    </tr>
    <tr v-show="totalData.devices.length !==0" v-for="(item,index) in deviceList" :key='index' :class="{bglight:index%2===1}" @click="toPage(index)">
      <td style="width:30%"><div>
        <img v-show="item.deviceType ===1" style="width: 0.2rem; position:relative;top:0.1rem; float: left;margin-left: 0.2rem" src="../../images/liping.png" alt="">
        <img v-show="item.deviceType ===2" style="width: 0.25rem;position:relative;top:0.06rem;float: left;margin-left: 0.2rem" src="../../images/game1.png" alt="">
        <img v-show="item.deviceType ===3" style="width: 0.28rem;position:relative;top:0.06rem;float: left;margin-left: 0.2rem" src="../../images/caipiao.png" alt="">
        <span style="vertical-align:middle">{{item.deviceName}}</span></div></td>
      <td style="width:15%" >
        <div style="overflow: hidden;position: relative;width: 100%;">
          <span class="light" >{{ item.deviceCount !=='--' ? item.deviceCount+'台' : item.deviceCount}}</span>
          <img v-show="item.deviceState ===1&&dateType===0" src="../../images/troubleflag-green.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
          <img v-show="item.deviceState ===2&&dateType===0" src="../../images/troubleflag-red.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
          <img v-show="item.deviceState ===3&&dateType===0" src="../../images/troubleflag-gray.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
          <img v-show="item.deviceState ===4&&dateType===0" src="../../images/troubleflag-gray2.png" alt="" style="width: 0.2rem;vertical-align: middle;position: absolute;top:0.07rem;right: 0.05rem;"/>
        </div>
      </td>
      <td style="width:15%" ><div><span class="light">{{item.totalCoin}}</span></div></td>
      <td style="width:30%;">
        <div>
          <span style="display: inline-block;width: 50%;text-align: center;float: left;margin-left: 30px;vertical-align: middle">{{item.aveCoin}}</span>
          <img v-show="item.aveStoreCompare ===1" src="../../images/up.png" alt="" style="width: 0.28rem;vertical-align: middle">
          <img v-show="item.aveStoreCompare ===2" src="../../images/dowm.png" alt="" style="width: 0.28rem;vertical-align: middle">
          <span v-show="item.aveStoreCompare ===0"> --</span>
        </div>
      </td>
    </tr>
  </table>
  <p v-show="totalData.devices.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">
    暂无数据
  </p>
  <!--门店列表 end-->
  <!--<div style="width: 100%;background-color: white;height: 0.1rem;margin-top: 0.5rem" ></div>-->
  <p style="width: 100%;margin:0.5rem 0 0.59rem ; padding-left: 0.1rem; text-align: left;color:white;background-color:#ED7D31;">数据来源：门店抄表({{originalData.dateText}})</p>
  <two-nav currenturl="coinStoreDetail" :storename="storeName" ></two-nav>

</div>
<script src="../../common/nav.js"></script>
<script type="text/javascript">
  mui.init();
  var vm = new Vue({
    el: '#app',
    data: function() {
      return {
        originalData:{
          rewardDevice:{
            "typeName":"礼品机",
            "typeCoin":0,
            "typeRate":0
          },
          ticketDevice:{
            "typeName":"彩票机",
            "typeCoin":0,
            "typeRate":0
          },
          gameDevice:{
            "typeName":"娱乐机",
            "typeCoin":0,
            "typeRate":0
          },
          devices:[
            {
              "deviceType":2,
              "deviceModel":"",
              "deviceName":"WPDMX",
              "totalCoin":0,
              "aveCoin":0,
              "aveStoreCompare":2
            },
          ]
        },
        names: {
          leftName: 'ATM实出币',
          rightName: '回收代币'
        },
        actnum:0,
        storeId: '',
        storeName: '',
        currentShopObj: {},
        fromDate:'',
        toDate:'',
        totalData: {
          rewardDevice:{
            "typeName":"礼品机",
            "typeCoin":0,
            "typeRate":0
          },
          ticketDevice:{
            "typeName":"彩票机",
            "typeCoin":0,
            "typeRate":0
          },
          gameDevice:{
            "typeName":"娱乐机",
            "typeCoin":0,
            "typeRate":0
          },
          devices:[
            {
              "deviceType":2,
              "deviceModel":"",
              "deviceName":"WPDMX",
              "totalCoin":0,
              "aveCoin":0,
              "aveStoreCompare":2
            },
          ]
        },
        pieOptions1: {
          title : {
            subtext: '投币方式',
            x:'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)",
            triggeron: 'click',
            position: [10, 10],
            textStyle: {
              fontSize: 12
            }
          },
          legend: {
            bottom: 10,
            left: 'center',
            data: ['卡头', '代币'],
            itemGap: 5,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 10
            }
          },
          color: ['#4472C4', '#ED7D31'],
          series: [{
            type: 'pie',
            selectedOffset: 5,
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 0,
                name: '卡头',
              },
              {
                value: 0,
                name: '代币'
              },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        pieOptions2: {
          title : {
            subtext: '收币设备',
            x:'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)",
            triggeron: 'click',
            position: [10, 10],
            textStyle: {
              fontSize: 12
            }
          },
          legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['礼品机', '彩票机','娱乐机'],
            itemGap: 5,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 10
            }
          },
          color: ['#ED7D31','#FFC000','#a3d609'],
          series: [{
            type: 'pie',
            selectedOffset: 5,
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [{
              value: 0,
              name: '礼品机',
            },
              {
                value: 0,
                name: '彩票机'
              },
              {
                value: 0,
                name: '娱乐机',
              },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        pieOptions3:{
          title: {
            subtext:'30天总收币趋势图',
            left: 'center',
            textStyle: {
              fontSize: 20,
              fontWeight: 500
            }
          },
          tooltip: {
            trigger: 'axis',    //item 饼图触发  axis线性图触发
            textStyle: {
              fontSize: 12
            },
            formatter: function (params) {
              var html='<p style="color:white;font-size: 12px;margin: 0;padding: 0 ">'+params[0].name+'</p>'
              for(var i=0;i<params.length;i++){
                html +='<p style="color:white;font-size: 12px;margin: 0;padding: 0 ">' +
                  '<span style="display: inline-block;width: 10px;height:10px;border-radius:5px;margin:0 0.05rem;background-color:'+params[i].color+'"></span>' +
                  '<span >'+params[i].seriesName+'：'+params[i].data+(params[i].seriesName ==='总收币' ? '枚' :  params[i].seriesName ==='币差率' ? '%' : '') +'</span></p>'
              }
              return html
            }
          },
          legend: {
            data: ['总收币'],
            show: true,
            bottom:10
          },
          feature: {
            dataView: {
              show: true,
              readOnly: false
            }
          },
          calculable: true,
          grid: {
            left: '0%',
            right: '6%',
            bottom: '14%',
            top: '20%',
            containLabel: true,
            borderColor: '#e2e2e2'
          },
          xAxis: [
            {
              type: 'category',
              splitLine: {
                show: false
              },
              data: [],
              axisLabel: {
                interval:1                                                                                                                        ,
//                    rotate:30,
                textStyle: {
                  color: '#868686',
                  fontSize: '8px'
                }
              }
            }
          ],
          yAxis: [
            {
              name:'',
              type: 'value',
              nameLocation: 'end',
              max: 100,
              splitLine: {
                show:true,
                lineStyle: {
                  // 使用深浅的间隔色  
                  color: ['#b1b1b1'],
                  type:'dotted'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#868686',
                  fontSize: '8px'
                },
                formatter:'{value}'
              }
            },
          ],
          series: [
            {
              name: '总收币',
              type: 'line',
              data:[0,30,80],
              yAxisIndex: 0,
              itemStyle: {
                normal: {
                  color: '#4472C4',        // 控制例子线条的style
                  lineStyle: {
                    color: '#4472C4'      //  lineStyle 控制对应线条style
                  }
                }
              },
            },
          ]
        },
        dateType:1,
        isFixed:false,
        modalShow:false,
        sortList:[
          {id:0,value:'按名称'},
          {id:1,value:'按类别'},
          {id:2,value:'按数量'},
          {id:3,value:'按总收币'},
          {id:4,value:'按单台收币'},
        ],
        sortType:0,
        chooseValue:'按名称',
        int:0,    //0 点击第一次 张开  1 关闭
        deviceList:[],
        isAve:false,
        lastPage:'',
        top:'1rem',
        chooseType:1,  //30天总收币量  2 币值波动  3 币差率波动
        mapData:[],   //第三张图的list
      }
    },
    created:function() {
      mui.plusReady(function(){
        vm.receiveParams()
      });
    },
    mounted: function() {
      window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
      receiveParams: function() {
        var sf = plus.webview.currentWebview();
        this.currentShopObj = sf.currentShopObj;
        this.storeId = sf.storeId
        this.storeName = sf.storeName
        this.toDate = sf.toDate
        this.fromDate = sf.fromDate
        this.actnum  = sf.actnum
        this.dateType  = sf.dateType
      },

      loadData:function() {
        var vm = this;
        config.ajax({
          url:'/Whcoinstat/store',
          data:{
            fromDate:Number(new Date(vm.fromDate).format('yyyyMMdd')) ,
            toDate:Number(new Date(vm.toDate).format('yyyyMMdd')),
            storeId:vm.storeId,
            type:vm.dateType,
          },
          success: function(res){
            console.log(JSON.stringify(res))
            if(res.result === 1) {
              vm.originalData=res
              vm.deviceList=JSON.parse(JSON.stringify(vm.originalData.devices));
              if(vm.deviceList.length !==0){
                vm.sortFun();
              }
              vm.pieOptions1.series[0].data=[
                {name: '卡头',value: vm.originalData.cardCoinInput === '--' ? 0 : vm.originalData.cardCoinInput},
                {name: '代币',value: vm.originalData.atmCoinInput === '--' ? 0 : vm.originalData.atmCoinInput}
              ];
              vm.pieOptions2.series[0].data= [
                { name: '礼品机',value: vm.originalData.rewardDevice.typeCoin !=='--' ? vm.originalData.rewardDevice.typeCoin : 0},
                { name: '彩票机',value: vm.originalData.ticketDevice.typeCoin !=='--' ? vm.originalData.ticketDevice.typeCoin : 0},
                { name: '娱乐机',value: vm.originalData.gameDevice.typeCoin  !=='--' ? vm.originalData.gameDevice.typeCoin :0}
              ];
              vm.loadData2()
            } else {
              mui.toast(res.errormsg)
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },

      loadData2:function() {
        var vm = this;
        config.ajax({
          url:'/Whcoinstat/storeTwo',
          data:{
            fromDate:Number(new Date(vm.fromDate).format('yyyyMMdd')) ,
            toDate:Number(new Date(vm.toDate).format('yyyyMMdd')),
            storeId:vm.storeId,
            type:vm.dateType,
          },
          success: function(res){
            if(res.result === 1) {

              vm.mapData=res.days;
              vm.changeMap()
            } else {
              mui.toast(res.errormsg)
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },

      initCharts: function() {
        var vm = this;
        var leftPie = echarts.init(document.getElementById('leftPie'));
        leftPie.setOption(vm.pieOptions1);
        var rightPie = echarts.init(document.getElementById('rightPie'));
        rightPie.setOption(vm.pieOptions2)
        var lineChart = echarts.init(document.getElementById('lineChart'));
        lineChart.setOption(vm.pieOptions3)
      },

      handleScroll:function(){
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop > 1131 ){
          vm.isFixed=true;
          vm.top='1.75rem'
        }else {
          vm.isFixed=false;
          vm.top='1.18rem'
        };
      },

      openModal:function(){
        if(vm.int === 0){
          this.modalShow=true;
          vm.int =1
        }else if(vm.int ===1){
          this.modalShow=false;
          vm.int =0
        }
      },
//选择排序type
      choose:function(id){
        vm.sortType =id;
        vm.chooseValue = vm.sortList[id].value;
        vm.modalShow=false;
        vm.int=0;
        vm.sortFun();
      },
//总收币量与单台收币量的切换
      showAve:function(){
        if(vm.isAve){
          vm.isAve=false
        }else{
          vm.isAve=true
        }
      },
//排序fun
      sortFun:function(){
        if(vm.sortType === 0){
          vm.deviceList = vm.deviceList.sort(function compareFunction(item1, item2) {
            return (item1.deviceModel).localeCompare(item2.deviceModel);
          });
        }else if(vm.sortType === 1){
          vm.deviceList.forEach(function(item,index){
            item.sort=String.fromCharCode(64 + parseInt(item.deviceType))+item.deviceModel
          });
          vm.deviceList = vm.deviceList.sort(function compareFunction(item1, item2) {
            return (item1.sort).localeCompare(item2.sort);
          });
        }else if(vm.sortType === 2){
          vm.deviceList.sort(function(a,b){
            return b.deviceCount - a.deviceCount
          })
        }else if(vm.sortType === 3){
          vm.deviceList.sort(function(a,b){
            return b.totalCoin - a.totalCoin
          })
        }else if(vm.sortType === 4){
          vm.deviceList.sort(function(a,b){
            return b.aveCoin - a.aveCoin
          })
        }
      },
//选择 1总收币量 2 币值波动 3 币差率波动
      chooseMap:function(params){
        var vm=this;
        if(params !== vm.chooseType){
          vm.chooseType =params;
          vm.changeMap()
        }
      },
//修改图的data
      changeMap:function(){
        var  vm=this;
        vm.pieOptions3.series[0].data=[],vm.pieOptions3.xAxis[0].data=[];
        var params='',max=0, date='';
        vm.mapData.forEach(function(item,index){
//           判断 获取哪个字段的值  totalInput：总收币量  avgcoin：币值  diffCoin：币差率
          if(vm.chooseType ===1){
            params=item.totalInput;
            vm.pieOptions3.series[0].type='bar';
          }else if(vm.chooseType ===2){
            params=item.avgcoin;
            vm.pieOptions3.series[0].type='line';
          }else{
            params=item.diffCoin;
            vm.pieOptions3.series[0].type='line';
          };
          if(params === '--'){
            params=0
          }
          params=(params+'').replace('%','')
          params=Number(params);

//							修改时间样式
          if(vm.dateType ===0){
            date=JSON.parse(JSON.stringify((item.date+'').replace(/^(\d{4})(\d{2})(\d{2})$/, "$3")))
          }else if(vm.dateType ===1){
            date= JSON.parse(JSON.stringify(item.date+'周'))
          }else if(vm.dateType ===2){
            date=JSON.parse(JSON.stringify(item.date+'月'))
          }
// 给图 赋值
          vm.pieOptions3.yAxis[0].axisLabel.formatter= vm.chooseType === 3 ? '{value}%' : '{value}';
          vm.pieOptions3.series[0].data.push(params);
          vm.pieOptions3.xAxis[0].data.push(date);
//							判断最大值
          if(Number(params)>max){
            max=Number(params)
          }
        });
        var name= '近'+ (vm.dateType===0 ? '30日' : vm.dateType===1 ? '12周' :'12个月') + (vm.chooseType ===1 ?  '总收币量' :  vm.chooseType ===2 ? '币值波动' : '币差率波动');
        vm.pieOptions3.title.subtext=name;
        vm.pieOptions3.yAxis[0].max = Number(max) > 2 ? max : 2;
        vm.pieOptions3.series[0].name = vm.chooseType ===1 ? '总收币' : vm.chooseType ===2 ? '币值' : '币差率';
        vm.pieOptions3.legend.data[0] = vm.chooseType ===1 ? '总收币' : vm.chooseType ===2 ? '币值' : '币差率' ;
        vm.initCharts();
      },
//跳转ATM详情页面
      toAtmDetail:function(url){
        var  vm=this;
        mui.openWindow({
          url: './ATMList.html',
          id: 'ATMList',
          styles: {
            titleNView: {
              titleText: vm.storeName,
              titleColor: "#FFFFFF",
              titleSize: "14px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            currentShopObj: vm.currentShopObj,
            storeId: vm.storeId,
            storeName: vm.storeName,
            fromDate: vm.fromDate,
            toDate: vm.toDate,
            dateType:vm.dateType,    //0 日 1 周 2 月
            actnum:vm.actnum    //0 日 1 周 2 月
          }
        });
      },
//去同级的其他页面（收入，收币，返奖，出票，榜单，活动）
      toOtherPage:function(url){
        var vm = this;
        var storeName=vm.storeName;
        var self=plus.webview.currentWebview();
        mui.openWindow({
          url: './'+url+'.html',
          id: url,
          styles: {
            titleNView: {
              titleText:  storeName ,
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              buttons: [{
                fontWeight: 'normal',
                fontSize: '18px',
                float: 'right',
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            storeId: vm.storeId,
            storeName: vm.storeName,
            fromDate: vm.fromDate,
            toDate:vm.toDate,
            dateType:vm.dateType,
            actnum: vm.actnum,
            lastPage:'coinShopOperated',
          },
          createNew:true,
        });
        setTimeout(function(){
          self.close('none');
        },1000)
      },
//去 某一个设备系列列表 页面
      toPage:function(index){
        var  vm=this;
        mui.openWindow({
          url: 'deviceSeriesList.html',
          id: 'deviceSeriesList',
          styles: {
            titleNView: {
              titleText: vm.fromDate+'至'+vm.toDate,
              titleColor: "#FFFFFF",
              titleSize: "14px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              buttons: [{
                fontWeight: 'normal',
                fontSize: '18px',
                float: 'right',
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index');
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            currentShopObj: vm.currentShopObj,
            storeId: vm.storeId,
            deviceType: vm.deviceList[index].deviceType,
            deviceModel: vm.deviceList[index].deviceModel,
            storeName: vm.storeName,
            fromDate: vm.fromDate,
            toDate: vm.toDate,
            dateType:vm.dateType    //0 日 1 周 2 月
          }
        });
      },

    },
    watch: {
      fromDate: function() {
        this.loadData()
      }
    }
  })
</script>
</body>

</html>